<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>VirtualizedTable 虚拟化表格</title>
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/element-plue2.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">
</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">在前端开发领域，表格一直都是一个高频出现的组件，尤其是在中后台和数据分析场景。 但是，对于 Table V1来说，当一屏里超过 1000 条数据记录时，就会出现卡顿等性能问题，体验不是很好。</p>
	<p class="desc">通过虚拟化表格组件，超大数据渲染将不再是一个头疼的问题。</p>
	<p class="desc">让我们简单渲染一个拥有 1000 行 10 列的虚拟化表格组件，来展示其极佳的性能。</p>
	<el-table-v2 :columns="columns" :data="data" :width="700" :height="400" fixed></el-table-v2>
	
	
	<el-divider content-position="left">其他用法</el-divider><!-- =============================================================== -->
	<p class="desc">虚拟化表格用得少，暂不深入研究</p>
	
	
	
</div>

</body>
<script>
const Main = {
	data() {
		return {
			columns: null,
			data: null,
			
		}
	},
	//实例挂载完成后被调用
	mounted(){
		this.$nextTick(function () {
			// 仅在整个视图都被渲染之后才会运行的代码
			this.columns = this.generateColumns(10);
			this.data = this.generateData(this.columns, 1000);
			// console.log(this.columns);
			// console.log(this.data);
		})
	},
	computed: {
		
	},
	methods:{
		generateColumns(length = 10, prefix = 'column-'){
			return Array.from({length}).map((_, i) => ({
				key: `${prefix}${i}`,
				dataKey: `${prefix}${i}`,
				title: `Column ${i}`,
				width: 150,
			}))
		},
		generateData(columns, length = 200, prefix = 'row-'){
			return Array.from({ length }).map((_, rowIndex) => {
				return columns.reduce(
					(rowData, column, columnIndex) => {
						rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
						return rowData
					},
					{
						id: `${prefix}${rowIndex}`,
						parentId: null,
					}
				)
			})
		},
		
	}
}

const app = Vue.createApp(Main);
app.use(ElementPlus);
let vm = app.mount("#app");
</script>
</html>